﻿@{
    ViewData["Title"] = "审批";
}
<div class="layui-layout layui-layout-admin">
    <div class="layui-logo layui-hide-xs layui-bg-black">移动审批</div>


    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">审批</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/home/index">单笔审批</a></dd>
                        <dd class="layui-this"><a href="/home/groupindex">组合审批</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">转授权</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">

                <div class="layui-form toolbar">
                    
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">日期：</label>
                        <div class="layui-input-inline mr0">
                            <input id="time" name="time" class="layui-input" type="text" readonly="readonly" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="formSubSearchTbBas" lay-submit>
                            <i class="layui-icon">&#xe615;</i>查询
                        </button>
                    </div>


                    <table class="layui-hide" id="demo" lay-filter="test"></table>
                    
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
                    </script>
                </div>
            </div>
        </div>

    </div>
    <div id="tplview" style="display: none;"></div>
    <script>
        //JS
        layui.use(['element','laydate', 'layer', 'util', 'form', 'table', 'laytpl'], function(){
          var element = layui.element
              ,layer = layui.layer
              ,util = layui.util
              ,$ = layui.$
              ,table = layui.table
              ,laytpl = layui.laytpl
              ,form = layui.form
              ,laydate = layui.laydate;

        form.render('select');

        // 搜索按钮点击事件
        form.on('submit(formSubSearchTbBas)', function (data) {
            insTb.reload({ where: data.field, page: { curr: 1 } }, 'data');
        });

          //头部事件
          util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
              layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
              layer.open({
                type: 1
                ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                ,area: ['260px', '100%']
                ,offset: 'rt' //右上角
                ,anim: 5
                ,shadeClose: true
              });
            }
          });

        //渲染时间控件
        laydate.render({
            elem: '#time',
            range: true
        });

          //执行一个 table 实例
        var insTb = table.render({
            elem: '#demo'
            ,height: 400
            ,url: '/api/approve/MobileGetTaskNodeGroup' //数据接口
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            //,totalRow: true //开启合计行
            ,cols: [[ //表头
              {field: 'c', title: '组合编号', width:180, fixed: 'left'}
              ,{field: 'n', title: '组合名称', width:180, sort: true}
              ,{field: 'p', title: '项目编号', width: 180, sort: true}
              ,{field: 'ct', title: '组合数量', width: 180, sort: true}
              ,{width: 120, align:'left', toolbar: '#barDemo'}
            ]]
          });

          table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ // 组合详情
                window.location.href = '/home/index?aGroupCode=' + data.c;
            }
          });
    });
    </script>
